<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="pic=${commons.random(5, '.png')}" th:style="'background:url(/admin/images/bg/'+@{${pic}}+');no-repeat; background-size: cover;'">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="shortcut icon" th:href="@{/admin/images/favicon.png}"/>
  <title>My Blog - 用户注册</title>
  <link th:href="@{//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
  <link th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
  <link th:href="@{/admin/css/style.min.css}" rel="stylesheet" type="text/css"/>
  <link th:href="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
    .panel-shadow {
      -moz-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
      -webkit-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
      box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
    }
    .bg-overlay {
      -moz-border-radius: 6px 6px 0 0;
      -webkit-border-radius: 6px 6px 0 0;
      background-color: rgba(47, 51, 62, 0.3);
      border-radius: 6px 6px 0 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .input-border {b1.png
      font-size: 14px;
      width: 100%;
      height: 40px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #dadada;
    }

    .bg-img > h3 {
      text-shadow: 0px 2px 3px #555;
      color: #cac9c8;
    }
  </style>

</head>
<body th:style="'background:url(/admin/images/bg/'+@{${pic}}+');no-repeat; background-size: cover;'" >
<div style="margin: 0 auto; padding-bottom: 0%; padding-top: 7.5%; width: 380px;">
  <div class="panel panel-color panel-danger panel-pages panel-shadow">
    <div class="panel-heading bg-img">
      <div class="bg-overlay"></div>
      <h3 class="text-center m-t-10"> Register My Blog</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal m-t-20" method="post" id="registerForm" onsubmit="return checkForm1()">
        <div class="form-group">
          <div class="col-xs-12">
            <input class=" input-lg input-border" name="username" type="text" placeholder="用户名:"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
            <input class=" input-lg input-border" type="text" name="email" placeholder="请输入邮箱:"/>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-12">
            <input class=" input-lg input-border" name="password" type="password" placeholder="设置密码:"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
              <input class=" input-lg input-border" type="password" name="passwordRepeat" placeholder="确认密码:"/>
          </div>
        </div>
        <div class="form-group text-center m-t-40">
          <div class="col-xs-12">
            <button class="btn btn-danger btn-lg btn-rounded btn-block w-lg waves-effect waves-light" style="box-shadow: 0px 0px 4px #868282;" type="submit">注&nbsp;册
            </button>
          </div>

        </div>
      </form>
    </div>
  </div>
</div>
<!-- Main  -->
<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
<script th:src="@{/admin/js/base.js}"></script>
<script type="text/javascript">
  /*<![CDATA[*/
  var tale = new $.tale();
  function checkForm1() {
    tale.post({
      url: '/admin/register',
      data: $("#registerForm").serialize(),
      success: function (result) {
        if (result && result.success) {
          window.location.href = '/admin/login';
        } else {
          tale.alertError(result.msg || '注册失败');
        }
      }
    });
    return false;
  }
  /*]]>*/
</script>
</body>
</html>